<template>
  <section>
    <el-form-item :label="labelname" :prop="checkprop">
      <el-input
        readonly="readonly"
        v-model="input"
        placeholder="上传图片"
        suffix-icon="el-icon-s-unfold"
        @click.native="showdialog()"
      ></el-input>
    </el-form-item>
   <el-upload
    action="https://jsonplaceholder.typicode.com/posts/"
    list-type="picture-card"
         :http-request="handleChange"
    :on-preview="handlePictureCardPreview"
    :on-remove="handleRemove"
  >
  </el-upload>
  <el-dialog v-dialogDrag :visible.sync="dialogVisible">
    <img width="100%" :src="dialogImageUrl" alt  />
  </el-dialog>
  </section>
</template>
<script>
export default {
  props: {
      // 上次文件目录
    category: { type: String, default: "commonUpload" }
    },
  data() {
    return {
      dialogImageUrl: "",
      dialogVisible: false
    };
  },
  methods: {
    handleRemove(file, fileList) {
      console.log(file, fileList);
    },
    handlePictureCardPreview(file) {
      this.dialogImageUrl = file.url;
      this.dialogVisible = true;
    },
    handleChange(){
      debugger
      const that = this;
      // MP上传url
      const url = "/mp/file/" + that.category + "/upload.do";
      that
        .$requestUpload(url, param)
        .then(response => {
          that.modeCode = "";
          let code = "";
          let text = "";
          if (
            response.result === "1" &&
            response.path.length > 0 &&
            response.path[0].length > 0 &&
            response.path[0][0].indexOf("|") > -1
          ) {
            // 返回格式：[["xxxx.png|/upload/{category}/{yyyyMMdd}/{guid}/xxxx.jpg","xxx.xx KB"]]
            // 截取出/upload/{category}/{yyyyMMdd}/{guid}/xxxx.jpg返回
            that.modeCode = response.path[0][0].split("|")[1];
            code = that.modeCode;
          }
          that.$emit("changeCode", code, text, that.codeField, that.comType);
        })
        .catch(err => {
          that.modeCode = "";
          console.info(err);
        });
    }
  }
};
</script>